<template>
    <el-container class="home_box">
        <el-header>
           <HomeHeader/> 
        </el-header>
        
        <el-container>
            <el-aside :width=" isCollapse ? '64px':'200px'">
                <Aside/>
            </el-aside>
            <el-main>
              <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import HomeHeader from '../components/HomeHeader.vue'
import Aside from '../components/Aside.vue'

export default {
    name:'Home',
    components:{HomeHeader, Aside},
    data(){
      return {
        isCollapse:''
      }
    },
    mounted(){
      this.$bus.$on('getisCollapse',(data)=>{
        this.isCollapse = data;
      })
    },
    destroyed(){
      this.$bus.$off('getisCollapse');
    }
}
</script>

<style lang="less" >
  .home_box{
    height: 100%;
    background-color: white;
    opacity: 0.9;
  }

  .el-header{
    // height: 100%;
    background-color: #606266;
    color: white;
    line-height: 60px;
    padding-left: 0;
    // z-index: 1000;
  }
  .el-aside {
    background-color: #DCDFE6;
    line-height: 200px;
  }
  .el-main {
    background-color: #E9EEF3;
  }
  body > .el-container {
    margin-bottom: 40px;
  }
</style>